<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="用户编号：">
      <el-input v-model="ruleForm.id" disabled class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="真实姓名：">
      <el-input v-model="ruleForm.realName"  class="selWidth"></el-input>
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group v-model="ruleForm.sex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="2">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="用户备注：">
      <el-input v-model="ruleForm.mark" type="textarea" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-radio-group v-model="ruleForm.status">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')" v-hasPermi="['admin:user:update']">提交</el-button>
      <el-button @click="resetForm('ruleForm')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    userInfoApi,
    userUpdateApi
  } from '@/api/user'
  import {
    Debounce
  } from '@/utils/validate'
  const defaultObj = {
    id: null,
    mark: '',
    addres: '',
    realName: '',
    sex: 1,
    status: false
  }
  export default {
    name: "UserEdit",
    props: {
      uid: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        ruleForm: Object.assign({}, defaultObj),
        rules: {}
      }
    },
    mounted() {
      if (this.uid) this.userInfo()

    },
    methods: {
      // 详情
      userInfo() {
        userInfoApi({
          id: this.uid
        }).then(async res => {
          this.ruleForm = {
            id: res.uid,
            mark: res.mark,
            realName: res.realName,
            sex: res.sex,
          }
        })
      },

      submitForm: Debounce(function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            userUpdateApi({
              id: this.ruleForm.id
            }, this.ruleForm).then(async res => {
              this.$message.success('编辑成功')
              this.$parent.$parent.visible = false
              this.$parent.$parent.getList()
            })
          } else {
            return false;
          }
        });
      }),
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('resetForm');
      }
    }
  }
</script>

<style scoped>
  .selWidth {
    width: 90%;
  }
</style>
